<template>
  <van-nav-bar
    title="请填写投诉信息"
    left-arrow
    fixed
    @click-left="onClickLeft"
  />
  <div class="py-12">
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.name"
        name="name"
        label="您的姓名"
        required
        placeholder="请输入"
        label-align="top"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.contact"
        name="contact"
        required
        label="您的联系方式"
        placeholder="请输入"
        label-align="top"
        :rules="[{ required: true, message: '请填写联系方式' }]"
      />
      <van-field
        v-model="form.verification_code"
        name="verification_code"
        required
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请输入验证码' }]"
      >
        <template #button>
          <van-button
            class="w-[100px]"
            color="#18bc9c"
            size="small"
            @click="getVerificationCode"
          >
            获取验证码
          </van-button>
        </template>
      </van-field>
      <van-field
        v-model="form.address"
        name="address"
        label="通讯地址"
        placeholder="请输入"
        label-align="top"
      />
      <van-field
        v-model="form.identity"
        is-link
        readonly
        required
        name="identity"
        label="您的身份"
        placeholder="请选择"
        label-align="top"
        :rules="[{ required: true, message: '请选择身份' }]"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-picker
          :columns="columns"
          :model-value="pickerValue"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        v-model="form.complaintType"
        is-link
        readonly
        required
        name="complaintType"
        label="投诉类型"
        placeholder="请选择"
        label-align="top"
        :rules="[{ required: true, message: '请选择投诉类型' }]"
        @click="showTypePicker = true"
      />
      <van-popup
        v-model:show="showTypePicker"
        destroy-on-close
        position="bottom"
      >
        <van-picker
          :columns="complaintTypeColumns"
          :model-value="complaintTypeValue"
          @confirm="onComplaintTypeConfirm"
          @cancel="showTypePicker = false"
        />
      </van-popup>
      <van-field
        v-model="form.complaintContent"
        name="complaintContent"
        rows="5"
        required
        label="投诉事由"
        type="textarea"
        maxlength="2000"
        placeholder="请您认真填写投诉事由，控制在2000字以内"
        label-align="top"
        show-word-limit
        :rules="[{ required: true, message: '请选择投诉类型' }]"
      />
      <van-field name="uploader" label="文件上传" label-align="top">
        <template #input>
          <van-uploader v-model="form.upload" />
        </template>
      </van-field>
    </van-form>
  </div>
  <div
    class="fixed left-0 bottom-0 w-full flex justify-between gap-5 p-4 bg-white border-t-2"
  >
    <van-button class="w-40"> 返回 </van-button>
    <van-button
      class="w-40"
      type="primary"
      native-type="submit"
      color="#18bc9c"
    >
      提交
    </van-button>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";

const onClickLeft = () => history.back();
const form = reactive({
  name: "",
  contact: "",
  verification_code: "",
  address: "",
  identity: "",
  complaintType: "",
  complaintContent: "",
  upload: []
});
const showPicker = ref(false);
const pickerValue = ref([]);
const columns = [
  {
    text: "请选择",
    value: 0,
    disabled: true
  },
  {
    text: "学生",
    value: 1
  },
  {
    text: "企业单位职员",
    value: 2
  },
  {
    text: "事业单位工作人员",
    value: 3
  }
];
const onConfirm = ({ selectedValues, selectedOptions }) => {
  form.identity = selectedOptions[0]?.text;
  pickerValue.value = selectedValues;
  showPicker.value = false;
};

const showTypePicker = ref(false);
const complaintTypeValue = ref([]);
const complaintTypeColumns = [
  {
    text: "请选择",
    value: 0,
    disabled: true
  },
  {
    text: "投诉类型1",
    value: 1
  },
  {
    text: "投诉类型2",
    value: 2
  },
  {
    text: "投诉类型3",
    value: 3
  }
];
const onComplaintTypeConfirm = ({ selectedValues, selectedOptions }) => {
  form.complaintType = selectedOptions[0]?.text;
  complaintTypeValue.value = selectedValues;
  showTypePicker.value = false;
};

const getVerificationCode = () => {
  console.log("getVerificationCode");
};
const onSubmit = () => {
  console.log("submit");
};
</script>
<style lang="scss" scoped></style>
